<template>
	<!-- 视频弹窗 -->
	<div class="video_main">
	<!-- 视频弹窗 -->
		<div class="project-info" id="videoModel" ref="videoModel">
			<div class="project-info-top"></div>
			<div class="project-close" @click="closeInfo">×</div>
			<div class="project-info-content">
				<video :src="videoUrl" controls class="video" width="100%" ref="vueRef"></video>
			</div>
		</div>
	</div>
</template>

<script>
import global from '@/views/Global.vue'
import video from '@/assets/images/video.mp4'
import addVideos from '@/mixins/addVideo.js'
export default {
	mixins:[addVideos],
	data() {
		return {
			videoUrl: video,
		};
	},
	mounted() {
		
	},
	methods: {
		closeInfo() {
			// 调用关闭弹窗方法
			this.removeVideoDialog()
			// this.videoUrl = '' // 清空数据 关闭视频播放
      this.$refs.vueRef.pause();//暂停
		},
	},
}
</script>

<style scoped lang="less">
// 视频弹窗
.video_main {
	z-index: 999;
	position: fixed;
	// left: 330px;
	// top: 125px;
	left: 0;
	top: 0;
	.switch_btn {
		position: absolute;
		top: 16px;
		left: 16px;
		display: flex;
	}
	// 弹窗样式：
	.project-info {
		width: 90vw;
    height: 90vh;
    background: rgba(0, 0, 0, 0.6);
    background-size: 100% 100%;
    position: fixed;
    z-index: 999;
    display: none;
    padding: 2vh;
    box-sizing: border-box;
		.project-info-top {
      /* width: 377px; */
      height: 1vh;
      background-size: 100% 100%;
      color: #ffffff;
      /* font-size: 14px; */
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
		}
		.project-close {
      color: #fff;
      width: 26px;
      height: 26px;
      position: absolute;
      top: 6px;
      right: 10px;
      background-size: 100% 100%;
      cursor: pointer;
      z-index: 1000 !important;
      font-size: 3vh;
		}
		.project-info-content {
			width: 28vw;
      margin-top: 2vh;
      /* font-size: 14px; */
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
      color: #cccccc;
		}
	}
}

</style>